<template>
  <div>
    <h2>{{info.name}} - - {{age}}</h2>
    <button @click="changeAge">修改</button>
  </div>
</template>

<script>
import { toRefs, toRef, reactive } from 'vue'
export default {
  setup() {
    const info = reactive({name:'张三', age: '12'})
    // 1、toRefs在解构的时候会将reactive里的对象都转换未ref，并建立链接
    // let {name, age} = toRefs(info)

    // 2、toRef 对其中一个属性进行转换ref，建立连接
    let age = toRef(info, 'age')
    const changeAge = () => {
      age.value++
    }
    return {
      changeAge,
      info,
      name,
      age
    }
  }
}
</script> 

<style>

</style>